<script setup>
import {ref, onMounted, onUnmounted } from 'vue'
import { RouterLink } from 'vue-router'
import TheNavBar from '../components/TheNavBar.vue';

// 返回顶部按钮功能
onMounted(() => {
  window.addEventListener('scroll', handleScroll)
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})

const handleScroll = () => {
  const backToTopButton = document.getElementById('backToTop')
  if (window.pageYOffset > 300) {
    backToTopButton.classList.remove('opacity-0', 'invisible')
    backToTopButton.classList.add('opacity-100', 'visible')
  } else {
    backToTopButton.classList.remove('opacity-100', 'visible')
    backToTopButton.classList.add('opacity-0', 'invisible')
  }
}

const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  })
}

// 平滑滚动
const smoothScroll = (e, targetId) => {
  e.preventDefault()
  if (targetId === '#') return
  const targetElement = document.querySelector(targetId)
  if (targetElement) {
    targetElement.scrollIntoView({
      behavior: 'smooth'
    })
  }
}
</script >

<template>
  <div class="min-h-screen font-sans antialiased bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 text-gray-800 flex flex-col items-center w-full">
    <!-- 使用导航栏组件 -->
    <TheNavBar />

    <!-- 主内容 -->
    <div class="w-full px-4 pb-16">
      <!-- 标题部分 -->
      <div class="text-center mb-16">
        <h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-dark mb-4">关于校友行</h1>
        <div class="w-20 h-1 bg-primary mx-auto rounded-full"></div>
      </div>

      <!-- 介绍部分 -->
      <div class="w-full mb-16">
        <div class="bg-white rounded-xl shadow-lg overflow-hidden hover-scale transition-all duration-300">
          <div class="md:flex">
            <div class="md:w-1/2">
              <img src="/src/assets/美国.webp" alt="" class="w-full h-full object-cover">
            </div>
            <div class="md:w-1/2 p-8 flex flex-col justify-center">
              <h2 class="text-2xl font-bold mb-4 text-dark">大学生旅游市场现状</h2>
              <p class="text-gray-700 mb-4 leading-relaxed">
                随着社会经济发展和人们生活水平提高，大学生作为年轻、活力且喜欢探索的群体，对旅游有着强烈需求和一定消费能力。同时，高校扩招使得大学生群体不断壮大，其闲暇时间充足，旅游意识与动机较强，成为出游率很高的潜在客源市场。
              </p>
              <p class="text-gray-700 leading-relaxed">
                虽然互联网旅游行业发展迅速，线上旅游平台众多，但这些平台大多没有针对大学生群体的特点和需求进行设计。大学生通常经济能力有限，更注重性价比，且对旅游的需求多样化，现有平台难以提供既实惠又符合其兴趣的旅游产品和服务。
              </p>
            </div>
          </div>
        </div>
      </div>

      <!-- 问题部分 -->
      <div class="w-full mb-16">
        <div class="bg-white rounded-xl shadow-lg overflow-hidden hover-scale transition-all duration-300">
          <div class="md:flex flex-row-reverse">
            <div class="md:w-1/2">
              <img src="/src/assets/2.webp" alt="学生同行" class="w-full h-full object-cover">
            </div>
            <div class="md:w-1/2 p-8 flex flex-col justify-center">
              <h2 class="text-2xl font-bold mb-4 text-dark">大学生旅行面临的挑战</h2>
              <p class="text-gray-700 leading-relaxed">
                很多大学生在旅行时面临找不到合适旅伴的困扰，由于时间和地点限制，很难找到志同道合的同学共同旅行。传统的社交平台或聊天工具并不适合旅行相关的交流和展示，无法满足大学生发布旅行计划、寻找旅行伙伴以及分享旅行经历的需求。
              </p>
            </div>
          </div>
        </div>
      </div>

      <!-- 意义部分 -->
      <div class="w-full mb-16">
        <h2 class="text-2xl font-bold text-dark mb-8 text-center">校友行的意义</h2>

        <div class="grid md:grid-cols-2 gap-8">
          <!-- 意义卡片1 -->
          <div class="bg-white rounded-xl shadow-md overflow-hidden hover-scale transition-all duration-300">
            <img src="/src/assets/自由行.webp" alt="" class="w-full h-48 object-cover">
            <div class="p-6">
              <h3 class="text-xl font-bold mb-3 text-primary">满足个性化旅游需求</h3>
              <p class="text-gray-700 leading-relaxed">
                校友行大学生组队旅行网站可以提供多种类型的旅游产品，如自由行、跟团游、定制游等，还能根据大学生的兴趣爱好、预算等因素，为其推荐个性化的旅行路线和行程安排，满足大学生多样化的旅游需求。
              </p>
            </div>
          </div>

          <!-- 意义卡片2 -->
          <div class="bg-white rounded-xl shadow-md overflow-hidden hover-scale transition-all duration-300">
            <img src="/src/assets/社交.webp" alt="" class="w-full h-48 object-cover">
            <div class="p-6">
              <h3 class="text-xl font-bold mb-3 text-primary">增强社交互动</h3>
              <p class="text-gray-700 leading-relaxed">
                网站为大学生提供了一个专门的社交平台，他们可以在上面发布旅行计划，寻找同行伙伴，还可以在旅行结束后分享经历和感受。通过这些互动，大学生可以结交到更多志同道合的朋友，拓展自己的社交圈子，丰富大学生活。
              </p>
            </div>
          </div>

          <!-- 意义卡片3 -->
          <div class="bg-white rounded-xl shadow-md overflow-hidden hover-scale transition-all duration-300">
            <img src="/src/assets/便捷.webp" alt="" class="w-full h-48 object-cover">
            <div class="p-6">
              <h3 class="text-xl font-bold mb-3 text-primary">提高旅行安全性和便利性</h3>
              <p class="text-gray-700 leading-relaxed">
                校友行网站可以对参与组队旅行的人员进行身份认证和信息审核，提高旅行伙伴的可信度，降低旅行风险。同时，网站还可以提供一站式的旅游服务，包括交通、住宿、餐饮等方面的预订和安排，为大学生旅行提供便利。
              </p>
            </div>
          </div>

          <!-- 意义卡片4 -->
          <div class="bg-white rounded-xl shadow-md overflow-hidden hover-scale transition-all duration-300">
            <img src="/src/assets/古城.webp" alt="" class="w-full h-48 object-cover">
            <div class="p-6">
              <h3 class="text-xl font-bold mb-3 text-primary">促进旅游市场发展</h3>
              <p class="text-gray-700 leading-relaxed">
                该网站的出现可以进一步挖掘大学生旅游市场的潜力，推动旅游行业的创新和发展。通过与旅游供应商合作，整合资源，降低成本，为大学生提供更优质、更实惠的旅游产品和服务，从而促进大学生旅游市场的繁荣。
              </p>
            </div>
          </div>
        </div>
      </div>

      <!-- 返回首页按钮 -->
      <div class="text-center mt-20">
        <RouterLink to="/" class="inline-block px-8 py-3 rounded-full bg-secondary hover:bg-secondary/90 text-white font-semibold text-lg transition-all duration-300 shadow-lg hover-scale">
          返回首页 <i class="fa fa-home ml-2"></i>
        </RouterLink>
      </div>
    </div>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-10 w-full">
      <div class="w-full px-4 text-center">
        <p class="mb-4"><i class="fa fa-paper-plane mr-2"></i>校友行 - 大学生组团旅行平台</p>
        <p class="text-gray-400 text-sm">© 2023 校友行. 保留所有权利.</p>
      </div>
    </footer>

    <!-- 返回顶部按钮 -->
    <button id="backToTop" class="fixed bottom-6 right-6 w-12 h-12 bg-primary rounded-full text-white shadow-lg flex items-center justify-center hover:bg-primary/90 transition-all duration-300 opacity-0 invisible hover-scale" @click="scrollToTop">
      <i class="fa fa-arrow-up"></i>
    </button>
  </div>
</template>

<style scoped>
:root {
  --primary: #FF7A45; /* 活力橙 */
  --secondary: #40A9FF; /* 清新蓝 */
  --tertiary: #52C41A; /* 生机绿 */
  --dark: #1F2937;
  --light: #F9FAFB;
}

.hover-scale {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-scale:hover {
  transform: scale(1.03);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.text-primary {
  color: var(--primary);
}

.bg-primary {
  background-color: var(--primary);
}

.text-dark {
  color: var(--dark);
}

.bg-dark {
  background-color: var(--dark);
}

.content-auto {
  content-visibility: auto;
}

.text-shadow {
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* 卡片悬浮效果增强 */
.bg-white {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
}
</style>

<style>
/* 全局样式 */
@import url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css');
</style>